<template>
  <div class="app-container">
    <el-form>
      <div class="params head-form">
        <el-form-item label="支付账号">
          <el-input v-model="params.account" style="flex: 1" placeholder="请输入" @blur="init" @keyup.enter="init" />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="params.dictId" placeholder="请选择" style="width: 300px" @change="init">
            <el-option v-for="item in payTypeList" :value="item.dictId" :key="item.dictId" :label="item.dictName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="params.status" style="flex: 1" @change="init">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :icon="RefreshRight" plain type="primary" @click="reset">重置</el-button>
          <el-button :icon="Plus" type="primary" @click="openModal"> 新建 </el-button>
        </el-form-item>
      </div>
    </el-form>
    <div class="table-container">
      <div class="table-head">
        <div>支付方式</div>
        <div>开户银行</div>
        <div>银行账户</div>
        <div>户名</div>
        <div>禁用/启用</div>
        <div>添加时间</div>
        <div>操作</div>
      </div>
      <div class="loading" v-if="loading" v-loading="loading"></div>
      <el-empty v-if="!data.length && !loading" />
      <el-scrollbar max-height="calc(100vh - 320px)">
        <div class="table-content">
          <div v-for="item in data">
            <div>{{ item.dictName }}</div>
            <div class="align-left">{{ item.bankName }}</div>
            <div>{{ item.account }}</div>
            <div class="align-left">{{ item.accountName }}</div>
            <div>
              <el-tag>{{ item.status ? "启用" : "禁用" }}</el-tag>
            </div>
            <div>{{ item.createTime }}</div>
            <div><el-button type="primary" link @click="openModal(item)">编辑</el-button></div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="query.current"
        v-model:page-size="query.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="init"
        @current-change="init"
      />
    </div>
    <el-dialog v-model="visible" width="560" center align-center show-close @close="resetModal">
      <template #title>
        <custom-title :title="(isNew ? '添加' : '编辑') + '支付账户'" />
      </template>
      <el-form :model="form" ref="formRef" label-width="140" :rules="rules">
        <el-form-item label="支付方式" prop="dictId">
          <el-select v-model="form.dictId" placeholder="请选择">
            <el-option v-for="item in payTypeList" :value="item.dictId" :key="item.dictId" :label="item.dictName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" />
        </el-form-item>
        <el-form-item label="开户银行" prop="bankName">
          <el-input v-model="form.bankName" />
        </el-form-item>
        <el-form-item label="户名" prop="accountName">
          <el-input v-model="form.accountName" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #007dff" />
        </el-form-item>
        <el-form-item label="收款码">
          <el-upload class="avatar-uploader" :show-file-list="false" :http-request="customRequest">
            <div class="code" v-if="form.accountCode">
              <img :src="form.accountCode" />
              <div class="del" @click.stop>
                <el-icon @click.stop="form.accountCode = ''">
                  <DeleteFilled />
                </el-icon>
              </div>
            </div>
            <el-icon v-else class="upload">
              <Plus />
              <span>点击上传</span>
            </el-icon>
          </el-upload>
          <span class="tip">注：支持JPG/JPEG/PNG格式，单张大小不超过10MB，只支持1张</span>
        </el-form-item>
        <el-form-item label="是否用于销售收款" prop="salesCollection">
          <div>
            <el-radio-group v-model="form.salesCollection">
              <el-radio :value="1" label="是"></el-radio>
              <el-radio :value="0" label="否"></el-radio>
            </el-radio-group>
            <div class="tip">注：支持分享该账户给客户进行收款</div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="comfirm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshRight, Plus } from "@element-plus/icons-vue";
import { getList, add, edit } from "@/apis/myAccount";
import { payTypeDict } from "@/apis/dict/dict";
import { ElMessage } from "element-plus";
import uploadFile from "@/utils/uploadFile";

const query = ref({
  current: 1,
  size: 10
});
const payTypeList = ref([]);
const loading = ref(false);
const params = ref({
  name: undefined,
  status: undefined
});
const form = ref({
  status: 1,
  salesCollection: 0
});
const resetModal = () => {
  form.value = { status: 1 };
  formRef.value.resetFields();
};
const customRequest = async options => {
  const type = ["image/jpg", "image/jpeg", "image/png"];
  const { file } = options;
  if (!type.includes(file.type)) {
    ElMessage.error("图片格式错误");
    return false;
  } else if (file.size / 1024 / 1024 > 10) {
    ElMessage.error("图片大小不能超过10MB!");
    return false;
  }
  const fileInfo = await uploadFile(options);
  form.value.accountCode = fileInfo.url;
};

const isNew = ref(true);
const formRef = ref(null);
const visible = ref(false);
const data = ref([]);
const total = ref(0);
const init = async () => {
  const res = await getList(query.value, params.value);
  data.value = res.data.list;
  total.value = res.data.total;
  loading.value = false;
};
const rules = {
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { max: 20, message: "开户银行不能超过20个字符", trigger: "blur" }
  ],
  dictId: [{ required: true, message: "请选择支付方式", trigger: "blur" }],
  accountName: [{ max: 20, message: "户名不能超过20个字符", trigger: "blur" }],
  bankName: [{ max: 20, message: "开户银行不能超过20个字符", trigger: "blur" }],
  remark: [{ max: 100, message: "备注不能超过100个字符", trigger: "blur" }],
  salesCollection: [{ required: true, message: "请选择", trigger: "blur" }]
};
const reset = () => {
  data.value = [];
  loading.value = true;
  params.value = {};
  init();
};
const openModal = item => {
  if (item.accountId) {
    isNew.value = false;
    form.value = { ...item };
  } else {
    isNew.value = true;
  }
  visible.value = true;
};
const comfirm = () => {
  formRef.value.validate(async valid => {
    if (!valid) return;
    if (isNew.value) {
      const res = await add(form.value);
      if (res.code == 200) {
        visible.value = false;
        init();
      }
    } else {
      const res = await edit(form.value);
      if (res.code == 200) {
        visible.value = false;
        init();
      }
    }
  });
};
const getPayTypeList = async () => {
  const res = await payTypeDict({ status: 1 });
  payTypeList.value = res.data;
};
onMounted(() => {
  loading.value = true;
  getPayTypeList();
  init();
});
</script>

<style lang="scss" scoped>
$border: 1px solid #dcdfe6;

.loading {
  height: 300px;
}

.params {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;

  .el-button--primary {
    background: #007dff;
    border-radius: 0;
    border: none;
  }

  .is-plain {
    border: 1px solid #007dff;
    background: none;

    &:hover {
      background: none;
      color: #007dff;
    }
  }
}

.dialog-footer {
  .el-button--primary {
    background: #007dff;
    border-radius: 0;
    border: none;
  }

  .el-button {
    border-radius: 0;
  }
}

.table-container {
  border: $border;
  line-height: 50px;
  text-align: center;

  @mixin col {
    min-height: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 3fr repeat(3, 1fr);

    > :last-child {
      border-left: $border;
    }
  }

  .table-head {
    @include col;
    background: #f2f6fc;
    color: #909399;
    border-bottom: $border;
  }

  .table-content {
    > div {
      height: auto;
      @include col;
      border-bottom: $border;
      color: #4e5969;
      line-height: 28px;

      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-all;
      }
    }
    .align-left {
      justify-content: left;
      text-align: left;
    }

    :last-child {
      border: none;
    }

    > div:nth-child(even) {
      background: #f5f7fa;
    }
  }

  .link {
    color: #007dff;
    text-decoration: underline;
    cursor: pointer;
  }

  .el-button.is-link {
    color: #007dff;
  }
}
.avatar-uploader {
  .list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .upload {
    width: 80px;
    height: 80px;
    background: #f2f3f5;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    align-self: center;
    color: #c9cdd4;

    span {
      font-style: normal;
    }
  }

  .el-icon svg {
    font-size: 24px;
  }

  .code {
    width: 80px;
    height: 80px;
    background: #f2f3f5;
    position: relative;
    img {
      width: 80px;
      height: 80px;
    }
    &:hover {
      .del {
        display: flex;
        gap: 10px;
      }
    }

    .del {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.2);
      display: none;
      color: #f2f3f5;
      font-size: 20px;
    }
  }
}
</style>
